import React, {useState} from "react"
import "./index.less"
import {appContext} from "context/app-context"
import {
  DesktopOutlined,
  ExclamationCircleOutlined,
  LogoutOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SkinOutlined,
} from '@ant-design/icons';

import {Divider, Dropdown, Menu, Modal, Tooltip} from 'antd'
import {withRouter} from "react-router"
import AvatarLoader from "libs/avatar-loader"
import Theme from "./theme"
import KeyOutlined from "@ant-design/icons/lib/icons/KeyOutlined"
import {enterFullScreen, exitFullScreen} from "libs/fullscreen"
import {postParam} from "../../../../shared/server"
import useTheme from "libs/antd-theme"
import UserOutlined from "@ant-design/icons/lib/icons/UserOutlined"
import FireOutlined from "@ant-design/icons/lib/icons/FireOutlined"


const userMenu = ({logout, userInfo, history}) => {
  return (
    <div className={'user-menu theme-box-border'}>
      <div>
        <div className={'user-info body-bg'}>
          <div className="header-user-avatar header-bg">
            <AvatarLoader src={`${userInfo.avatar}`} style={{width: '60px', height: '60px'}}/>
          </div>
          <div>
            <h3 className={'header-text'}>{userInfo.displayName || '匿名用户'}</h3>
            <div className={'role-names secondary-text'}>
              {userInfo.role}
            </div>
          </div>
        </div>
      </div>
      <Divider/>
      <Menu style={{width: '100%'}}>
        <Menu.Item key={'2'}>
          <div className={"header-menu-item"}>
            <KeyOutlined/> 修改密码
          </div>
        </Menu.Item>
        <Menu.Divider/>
        <Menu.Item key={'3'}>
          <div className={"header-menu-item"} onClick={logout}>
            <LogoutOutlined/> 退出系统
          </div>
        </Menu.Item>
      </Menu>
    </div>
  )
}

const AppHeader = (props) => {

  const {
    context,
    history
  } = props

  const {menuCollapsed, setMenuCollapsed, userInfo} = context
  const [fullScreen, $fullScreen] = useState(false)
  const [themeMenuVisible, $themeMenuVisible] = useState(false)
  const {setPrimaryColor, toggleStyle} = useTheme()

  const themeMenuVisibleHandler = flag => $themeMenuVisible(flag)

  //切换全屏
  const toggleFullScreen = () => {
    if (fullScreen) {
      exitFullScreen()
      $fullScreen(false)
    } else {
      enterFullScreen()
      $fullScreen(true)
    }
  }

  const logout = ({history}) => {
    Modal.confirm({
      title: '注销',
      content: '确定注销当前用户吗？',
      icon: <ExclamationCircleOutlined/>,
      onOk: () => {
        postParam('/user/logout', {})
          .then((data) => {
            if (data === "success") {
              history.push('/login')
            }
          })
      }
    })
  }

  return (
    <div className={"zr-app-header"}>
      <div className={'header-menu-fold header-button'} onClick={() => setMenuCollapsed(!menuCollapsed)}>
        {
          menuCollapsed
            ? <MenuUnfoldOutlined/>
            : <MenuFoldOutlined/>
        }
      </div>

      <div className="header-button-box">

        <Dropdown overlay={userMenu({logout, userInfo, history})} placement="bottomRight" trigger={['click']}>
          <div className={"header-button"}>
            <UserOutlined/>
          </div>
        </Dropdown>

        <div className={"header-button"} onClick={toggleFullScreen}>
          <DesktopOutlined/>
        </div>

        <Dropdown overlay={<Theme onChange={themeMenuVisibleHandler}/>}
                  placement="bottomCenter"
                  visible={themeMenuVisible}
                  onVisibleChange={themeMenuVisibleHandler}
        >
          <div className={"header-button"}>
            <SkinOutlined/>
          </div>
        </Dropdown>

      </div>
    </div>
  )
}

export default appContext(withRouter(AppHeader))